<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .mini-panel-border {
        border-left: none;
    }
    .mini-grid-cell{
        padding:3px 5px;
    }
    span.hx_hover:hover{
        cursor: pointer;
        color: #D01405;
        text-decoration:underline;
    }
</style>
<div class="mini-splitter" style="width:100%;height:620px;">
    <div size="160" showCollapseButton="false" minSize="160">
        <div style="border-bottom:1px solid #E4EAEC;padding:7px 0 7px 5px;font-size:14px;">
            文章分类
        </div>
        <ul id="category" class="mini-tree" url="${ctx}/category/list?module=article" style="margin:8px 5px;"
            showTreeIcon="true" textField="catName" idField="catId" parentField="parentId" resultAsTree="false"
            showArrow="true"  autoLoad="true" onnodeclick="onArticleNodeClick" expandOnLoad="0"
        >
        </ul>
    </div>
    <div showCollapseButton="false">
        <!-- 工具栏 -->
        <div class="mini-toolbar">
            <table>
                <tr>
                    <td style="width:100%;">
                        <a id="add" class="mini-button" iconCls="icon-page-add">增加</a>
                        <a id="edit" class="mini-button" iconCls="icon-page-edit">编辑</a>
                        <a id="remove" class="mini-button" iconCls="icon-page-delete">删除</a>
                        <span class="separator"></span>
                        <a id="ec_btn" class="btn-default btn_see"><i class="fa fa-random"></i>生成静态</a>
                    </td>
                    <td style="white-space:nowrap;">
                        条件 <input id="tj" class="mini-combobox w100" showNullItem="true" emptyText="选择条件" valueField="val"
                                  textField="name" url="${ctx}/dict/code?id=YHTJ&_refresh"/>
                        <input id="key" class="mini-textbox w200" emptyText="请输入标题关键字"/>
                        <a id="search" class="mini-button" iconCls="icon-search" style="margin-right:0;">查询</a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="articleGrid" class="mini-datagrid" multiSelect="true"
             url="${ctx}/article/page" idField="id" pageSize="20" selectOnLoad="false"
        >
            <div property="columns">
                <div type="checkcolumn" width="15"></div>
                <div field="title" renderer="r.renderTitle">文章标题</div>
                <div field="level" width="10" align="center" headerAlign="center" renderer="r.renderLevel">级别</div>
                <div field="catName" width="40">文章分类</div>
                <div field="hits" width="20">浏览数</div>
                <div field="createTime" width="40" renderer="r.renderCreateTime">添加日期</div>
                <div field="action" width="20">状态</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var init = function(){
        mini.parse();
        var grid = mini.get("articleGrid");
        grid.load();
        //删除数据操作
        $("a#remove").click(function () {
            var rows = grid.getSelecteds();
            if (rows.length == 0)
                alert("请选着一条记录进行删除");
            else {
                confirm("您是否确定需要删除该条记录", function () {
                    var ids = [];
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var r = rows[i];
                        ids.push(r.id);
                    }
                    $.post("${ctx}/article/delete", {ids: ids}, function (res) {
                        if (res.code == 0) {
                            tips.success("成功删除 " + res.data + " 条记录!");
                            grid.reload();
                        } else
                            tips.error(res.message);
                    });
                });
            }
        });

        //跳转添加文章
        $("a#add").click(function(){
            app.loadMain("${ctx}/admin/article/add.jsp", 0, "文章管理 - 添加文章");
        });

        //跳转编辑文章
        $("a#edit").click(function(){
            var rows = grid.getSelecteds();
            if(rows.length == 0){
                alert("请选择一条记录进行编辑!");
            }else if(rows.length > 1){
                alert("只能选择一条记录进行编辑!");
            }else {
                app.loadMain("${ctx}/admin/article/add.jsp?id=", 0, "文章管理 - 编辑文章", rows[0].id);
            }
        });

        var tip = new mini.ToolTip();
        tip.set({
            target: document,
            selector: '[data-placement]',
            onbeforeopen: function (e) {
                e.cancel = false;
            },
            onopen: function (e) {
                var thumb = $(e.element).attr("data-url");
                this.showLoading();
                setTimeout(function(){
                    tip.setContent(`<img src="${ctx}`+thumb+`" style="width:200px;height:120px;"/>`);
                }, 200);
            }
        });
    }

    var r = {
        renderTitle: function(e){
            var rec = e.record;
            if(rec.thumb && rec.thumb != ""){
                return `<span data-placement="bottomleft" data-url="`+rec.thumb+`"><i class="fa fa-picture-o" style="margin-top:-4px;"></i></span><span class="hx_hover">`+e.value+`<span>`;
            }
            return `<span class="hx_hover">`+e.value+`<span>`;
        },
        renderLevel: function(e){
            var val = e.value;
            if(!val || val == 0) return "";
            return `<span class="level bg_`+val+`">`+ val+`</span>`;
        },
        renderCreateTime: function(e){
            var rec = e.record;
            if(e.value) {
                if(rec.day) return `<span style="font-size:10px;color:red;">` + e.value + `</span>`;
                return `<span style="font-size:10px;">` + e.value + `</span>`;
            }
        }
    }

    var onArticleNodeClick = function(e){
        var sender = e.sender;
        var node = e.node;
        var grid = mini.get("articleGrid");
        var ids = [];
        if(sender.isLeaf(node)){
            ids.push(node.catId);
        }else{
            $.each(sender.getChildNodes(node), function(i, obj){
                ids.push(obj.catId)
            });
        }

        grid.load({catIds:ids});
    }

</script>